<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<link type="text/css" href="<%=path%>/manage/css/layout.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/manage/css/Tooltip.css" />
		<script type="text/javascript" src="<%=path%>/manage/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery_form.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/easyTooltip.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.wysiwyg.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/hoverIntent.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/superfish.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/custom.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery-ui-1.8.11.custom.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/Tooltip.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/errorTip.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.validate.methods.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.validate.defaults.js"></script>
		
		<script type="text/javascript" src="<%=path%>/manage/js/My97DatePicker/WdatePicker.js"></script>
		<!-- End of Libraries -->
		<style type="text/css">
			.editInfo li{margin:5 0;}
			.editInfo li input,textarea{margin-left:0px;}
			.btnNewInfo{width:80px;height:35px;float:left;margin:10px 5px 0 0;}
			.btnNewInfo input{width:60px;}
			.btnNewInfo img{width:16px;height:16px;float:right;top:-35px;left:-12px;left:-10px\9;position:relative;}
			.deleteInfoBtn {width:16px;height:16px;float:right;top:0px;left:340px;top:15px\9;left:334px\9;position:absolute;}
			.uploadImgInfo {position:relative;top:-50px;left:-10px;width:16px;height:16px;}
			.iconDeleteBtn {width:16px;height:16px;float:right;top:-1px;left:70px;top:15px\9;left:334px\9;position:absolute;}
		</style>

<script language="javascript" type="text/javascript">
	$(document)
			.ready(
					function() {
					 addMessageForm = $("#addMessageForm").validate({
		        rules : {
		            "msgDto.title":{
		             required : true,
		             maxlength: 25
		            },
		            "msgDto.summary":{
		            required : true,
		            maxlength: 50
		            },
		            "msgDto.startDate":{
		            required : true
		            },
		            "msgDto.expireDate":{
		            required : true
		            },
		            "txt":{
		            checkBodyContent : true,
		            checkMsg : true
		            }
		        },
		        messages : {
		            "msgDto.title":{
		             required :"请输入消息标题",
		             maxlength :"最大长度25"
		            },
		            "msgDto.summary" : {
		             required : "请输入消息简介",
		             maxlength :"最大长度50"
		            },
		            "msgDto.startDate":{
		            required : "请输入开始时间"
		            },
		            "msgDto.expireDate":{
		            required : "请输入结束时间"
		            },
		            "txt":{
		            checkBodyContent : "请输入消息的具体内容",
		            checkMsg : ""
		            }
		        }
		    });
		    jQuery.validator.addMethod("checkBodyContent", function(value, element) {
			    var obj =  $("#msgBody1 input[name^='msgDto.bodyDto']");
			    if(obj==undefined||obj.length==0){
			    $("#txtErrMsg").val("请录入消息的具体内容");  
			     $("#txtErrMsg").show(); 
			    return false;
			    }else{
			       $("#txtErrMsg").val("");
			       $("#txtErrMsg").hide();
			       return true;   
			    }
			  
			}, "请录入消息的具体内容");
						//加载dialog
						$("#upload")
								.dialog({ autoOpen : false,
											width : 450,
											height :150,
											modal : true,
											title : '选择图片',
											
											close : function() {
												//清除file输入框里的值
												$("#updImgArea").html('<input id="fileupload" name="fileMaterial" type="file" />');
												$("#message").html("");
											}
										});
					});
				
			// 验证body有没有内容
		    jQuery.validator.addMethod("checkMsg", function(value, element) {
			   var flag=true;
			   var length=0;
			   //查找hidden
				  $("#msgBody1 input[type='hidden']").each(function(){
				  length=length+$(this).val().length;
				 
				  });	
			   $("#msgBody1 textarea").each(function(){	
				  	var value=$(this).val();
				    if(value==""){	   
				      $(this).addErrorMessage("请输入消息内容");
				      flag= false;
				    }
				    length=length+value.length;	
				   if(length>900){
				      $(this).addErrorMessage("所有消息内容加起来不允许超过1000");
				       flag= false;
				  }			    		
				  });
				  
				  return flag;			  
			}, "请录入消息的具体内容");
	
	//增加消息内容
	var addMsgCount = 1;
	var linkUrlClickCount = 0;
	function addMessage(type) {		
		var msgBody = $("#msgBody1");
		var msg="";
		var contentType="";
		var contentId="msgContent"+addMsgCount;
		var start="<li id='"+contentId+"'></li>";
		//文本
		if(type==0){	
			msgBody.append(start);	 
			var msgContentAppend= $("#"+contentId+"");
		    msg="<div style='position:relative;z-index:1;padding-top:5px;'><input type='hidden' name='msgDto.bodyDto["+addMsgCount+"].contentType' value='0'><img src='<%=path%>/images/delete.png' class='deleteInfoBtn' onclick='delMsgFun(this,1)' id='delContent"+addMsgCount+"'><textarea id='txtMsg"+addMsgCount+"' name='msgDto.bodyDto["+addMsgCount+"].content'></textarea> </div>";
		}
		if(type==1){
			msgBody.append(start);
			var msgContentAppend= $("#"+contentId+"");
			openUpload(1,addMsgCount);
		}
		if(type==3){
		  var fromUrl = '<s:property value="fromUrl" />';
		  if("edit"==fromUrl){
		  	if(linkUrlClickCount == 0){
		  		if(window.confirm("添加外部链接会删除其他类型的数据，是否继续？")) {
		  			msgBody.children().remove();
		  			linkUrlClickCount++;
		  		} else {
		  			return;
		  		}
		  	}  else {
		  		return;
		  	}
		  } else {
		  	if(window.confirm("添加外部链接会删除其他类型的数据，是否继续？")) {
		  		msgBody.children().remove();
		  	} else {
		  		return;
		  	}
		  }
		  msgBody.append(start);
		  msgContentAppend= $("#"+contentId+"");
		 contentType="<input type='hidden' name='msgDto.bodyDto["+addMsgCount+"].contentType' value='3'>";
		  msg="输入外部链接地址:<input type='text' onkeydown='checkIsUrl(this)' onblur='checkIsUrl(this)' id='txtMsg"+addMsgCount+"' name='msgDto.bodyDto["+addMsgCount+"].content'><input type='button' onclick='delMsgFun(this,0)' id='delContent"+addMsgCount+"' value='删除'>";
		  $("#imgVideo1").unbind("click");
		  $("#imgVideo2").unbind("click");
		  $("#imgVideo3").unbind("click");
		  $("#imgVideo1").removeAttr("onclick");
		  $("#imgVideo2").removeAttr("onclick");
		  $("#imgVideo3").removeAttr("onclick");
		}
		
		msgContentAppend.append(contentType);
		msgContentAppend.append(msg);
		$("#txtMsg"+addMsgCount).focus();
		addMsgCount++;
	}

	function changeType(obj) {
		//var value = $("#selectType  option:selected").val();
		var id = $(obj).attr("id");
		var value = $(obj).val();
		//alert(id + "  " + value);
		//获取当前是哪一条内容
		var count = id.substring(id.length - 1);
		if (value != 0) {
			$("#videoFile" + count + "").show();
			$("#txtMsg" + count + "").hide();
		} else {

			$("#videoFile" + count + "").hide();
			$("#txtMsg" + count + "").show();
		}
	}

	function delMsgFun(obj,type) {
	  if(type==0){
		  $("#imgVideo1").bind('click',function(){
		  	addMessage(0);
		  });
		  $("#imgVideo2").bind('click',function(){
		  	addMessage(1);
		  });
		  $("#imgVideo3").bind('click',function(){
		  	addMessage(2);
		  });
		  $("#saveAndNextBtn").attr("disabled",false);
			$("#confirmBtn").attr("disabled",false);
	  }
	  var id = $(obj).attr("id");
	  var count = id.substring(10);
	  $("#msgContent" + count + "").remove();
	  linkUrlClickCount = 0;
	}
	//选择群组
	function addDesGroup(groupId,name){
	
	  $("#groupNames").val($("#groupNames").val()+name+",");
	  $("#groupIds").val($("#groupIds").val()+groupId+",");
	  
	}

	
	//打开文件上传
	var fileType=0;
	//图片上传成功后 显示的地址
	var imgShowId=0;
	function openUpload(type,obj){
	    //var id = $(obj).attr("id");
		//alert(id);
		//var count = id.substring(6);
		//图片显示地址的index
		imgShowId=obj;
		fileType=type;	
	$("#upload").dialog("open");
	}
	
	
function uploadImage() { 
 $(document)  
        .ready(  
                function(){
			//alert("test");
			 var options = {  
			     url : "<%=path%>" + '/pns/uploadFile.action',//跳转到相应的Action  
						type : "POST",//提交方式  
						dataType : "script",//数据类型 
						async:false,
						success : function(msg) {//调用Action后返回过来的数据  
					
						  //	alert(msg);
							if (msg.indexOf("#") > 0) {
								//var data = msg.split("#");
								var data = msg.split("#");
							if(fileType==1){
							  var index=imgShowId+1;
							  var imgIndex = addMsgCount-1;
							   var msgContentAppend= $("#msgContent"+imgIndex+"");
								var imgsrc=data[1];
								msgContentAppend.append("<img id='iconMsgImg"+imgIndex+"' src='"+imgsrc+"' width='80px' height='60px' title='双击变更' ondblclick='openUpload(3,"+imgIndex+")' style='cursor:pointer;'><img src='<%=path%>/images/delete.png' class='uploadImgInfo' onclick='delMsgFun(this,1)' id='delContent"+imgIndex+"' /></li>");
								
							    var type="<input type='hidden' name='msgDto.bodyDto["+imgIndex+"].contentType' value='1'>";
								var content="<input type='hidden' id='msgDtoImg"+imgIndex+"' name='msgDto.bodyDto["+imgIndex+"].content' value='"+data[1]+"'> ";
								msgContentAppend.append(type);								
								msgContentAppend.append(content);
							 }
							if(fileType==2){
							    var imgsrc=data[1];
							    var iconImgInfo = "<div style='position:relative;z-index:1;padding-top:5px;'>"
							    	+ "<img src='"+imgsrc+"' width='80px' height='60px' id='iconMsgImg'>"
							    	+ "<img src='<%=path%>/images/delete.png' class='iconDeleteBtn' onclick='deleteIconImg()' id='iconDeleteImg' />"
							    	+ "</div>";
								$("#iconMsg").html(iconImgInfo);  
								$("#msgIcon").val(data[1]);
							}
							
							if (fileType == 3){
								$("#iconMsgImg"+imgShowId).attr("src",data[1]);
								$("#msgDtoImg"+imgShowId).val(data[1]);
							}
								  
								//alert(data[1]);
								$("#upload").dialog("close");
							} else {
								$("#message").html(msg);//在相应的位置显示信息  
							}
						}
					};
					$("#form2").ajaxSubmit(options);
					return false;
				});
	}
	
	function deleteIconImg() {
		$("#iconMsg").html("");
		$("#msgIcon").val("");
	}
	
	//下一步
	function goAddGroup(){
		window.location.href="goAddGroup.action";
	}
	function IsURL(str_url){ 
        var strRegex = "^((https|http|ftp|rtsp|mms)?://)"  
        + "?(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?" //ftp的user@  
        + "(([0-9]{1,3}\.){3}[0-9]{1,3}" //IP形式的URL- 199.194.52.184  
        + "|" // 允许IP和DOMAIN（域名）
        + "([0-9a-zA-Z_!~*'()-]+\.)*" // 域名- www.  
        + "([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z]\." // 二级域名  
        + "[a-zA-Z]{2,6})" // first level domain- .com or .museum  
        + "(:[0-9]{1,4})?" // 端口- :80  
        + "((/?)|" // a slash isn't required if there is no file name  
        + "(/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+/?)$";  
        var re=new RegExp(strRegex);
        if (re.test(str_url)){ 
            return (true);  
        }else{  
            return (false);  
        } 
    } 
    function checkIsUrl(obj) {
    	var value = $(obj).val();
		if (!IsURL(value)) {
			$(obj).addErrorMessage("请输入正确的URL");
			$("#saveAndNextBtn").attr("disabled",true);
			$("#confirmBtn").attr("disabled",true);
		} else {
    		$(obj).removeErrorMessage();
    		$("#saveAndNextBtn").attr("disabled",false);
			$("#confirmBtn").attr("disabled",false);
    	}
    }
	</script>
	</head>
	<body>
		<p class="sitemap">
			当前位置：内容管理 > 推送消息新增
		</p>
		<h1>
			推送消息编辑
		</h1>
		<div>
			<div id="tabs">
				<ul>
					<li>
						<a href="#tabs-1">推送消息编辑</a>
					</li>
				</ul>
				<div id="upload" style="display: none;">
			   <form id="form2" method="post" enctype="multipart/form-data">  
	            <table width="400" border="0" cellspacing="1" cellpadding="0">  
	                <tr>  
	                    <td height="25">  
	                      <span style="font-size:14px">浏览图片：  </span>
	                    </td>  
	                    <td>  
	                        <span id="updImgArea"><input id="fileupload" name="fileMaterial" type="file" /></span>
	                        <div id="message" style="font-size:14px"></div>  
	                    </td>  
	                </tr>  
	                <tr>  
	                    <td colspan="2" align="center">  
	                        <input type="button" style="font-size:14px"
	                            onclick="uploadImage()" value="上传" />  
	                    </td>  
	                </tr>  
	            </table>  
             </form>  
				</div>
				<form name="addMessageForm" id="addMessageForm" enctype="multipart/form-data"
					method="post" action="saveMessage.action">
					<ul class="editInfo">
						<s:hidden name="msgDto.messageId"></s:hidden>
						<li>
							<span class="btnNewInfo">
								<input type="button" value="文本" id="txtVideo1" />
								<img src="<%=path%>/images/add.png" id="imgVideo1" onclick="addMessage(0)" />
							</span>
							<span class="btnNewInfo">
								<input type="button" value="图片" id="txtVideo2" />
								<img src="<%=path%>/images/add.png" id="imgVideo2" onclick="addMessage(1)" />
							</span>
							<span class="btnNewInfo">
								<input type="button" value="多媒体" />
								<img src="<%=path%>/images/add.png" id="imgVideo3" onclick="addMessage(2)" />
							</span>
							<span class="btnNewInfo">
								<input type="button" value="外部链接" />
								<img src="<%=path%>/images/add.png" id="imgVideo4" onclick="addMessage(3)" />
							</span>
						</li>
						<div style="clear:both"></div>
						<li>
							消息标题：
							<s:textfield name="msgDto.title"></s:textfield>
							<span>(最大长度25)</span>
						</li>
						<li>
							消息简介：
							<s:textarea name="msgDto.summary" style="margin-left:64px;"></s:textarea>
							<span style="margin-left:65px;">(最大长度50)</span>
						</li>
						<li>
										icon图标：
										<input type='button' style="margin-left:2px;" value='上传图片' onclick="openUpload(2,this)"/><br>
										<s:hidden name="msgDto.icon" id="msgIcon"/>
										<div id="iconMsg" style="padding:5px 0 0 64px">
										<s:if test='fromUrl=="edit"'>
											<s:if test="msgDto.icon!='default'">
												<div style="position:relative;z-index:1;padding-top:5px;">
													<img src='<s:property value="msgDto.icon" />' width='80px'
														height='60px' id="iconMsgImg" />
													<img src="<%=path%>/images/delete.png" class="iconDeleteBtn" onclick="deleteIconImg()" id="iconDeleteImg" />
												</div>
											</s:if>
										</s:if>
										</div>
									</li>					
					 <li id="bodyMsgError" style="width:300px">消息内容:<input type="text" name="txt" id="txtErrMsg" style="display:none" readonly="readonly"></li>
                          <li>
							<ul id="msgBody1" style="padding:5px 0 0 58px">
								<s:if test='fromUrl=="add"'>
									<li id="msgContent0" style="margin:0;padding:0;">
										<div style="position:relative;z-index:1;padding-top:5px;">
											<input type="hidden" name="msgDto.bodyDto[0].contentType" value="0" style="float: right">
											<img src="<%=path%>/images/delete.png" class="deleteInfoBtn" onclick="delMsgFun(this,1)" id="delContent0" />
											<textarea id="txtMsg0" name="msgDto.bodyDto[0].content"></textarea>
										</div>
									</li>
								</s:if>
								<s:iterator value="msgDto.bodyDto" var="s" status="listDto">
									<s:if test="#listDto.last" >
										<script>
											addMsgCount=parseInt('${ listDto.count}') + 1;
										</script>
									</s:if>
									<li id="msgContent${ listDto.index}">
										<s:if test="contentType==0">
											<div style="position:relative;z-index:1;padding-top:5px;">
												<input type='hidden' name='msgDto.bodyDto[${ listDto.index}].contentType' value="0" />
												<img src="<%=path%>/images/delete.png" class="deleteInfoBtn" onclick="delMsgFun(this,2)" id="delContent${ listDto.index}" />
												<textarea name="msgDto.bodyDto[${ listDto.index}].content"><s:property value="content" /></textarea>
											</div>
										</s:if>
										<s:elseif test="contentType==1">
							   				<input type='hidden' name='msgDto.bodyDto[${ listDto.index}].contentType' value='1'>
											<img src='<s:property value="Content" />' width='80px'
												height='60px' id='iconMsgImg${ listDto.index}' title="双击变更" ondblclick="openUpload(3,${ listDto.index})" style="cursor:pointer;" />
											<img src="<%=path%>/images/delete.png" class="uploadImgInfo" onclick="delMsgFun(this,2)" id="delContent${ listDto.index}" />
											<input type='hidden' id='msgDtoImg${ listDto.index}' name='msgDto.bodyDto[${ listDto.index}].content' value='<s:property value="Content" />'> 
										</s:elseif>
										<s:elseif test="contentType==3">
											<script>
												$("#imgVideo1").unbind("click");
											    $("#imgVideo2").unbind("click");
											    $("#imgVideo3").unbind("click");
											    $("#imgVideo1").removeAttr("onclick");
											    $("#imgVideo2").removeAttr("onclick");
											    $("#imgVideo3").removeAttr("onclick");
											</script>
											<input type='hidden' name='msgDto.bodyDto[${ listDto.index}].contentType' value='3'>
		  									外部链接地址:
		  									<input type='text' id='txtMsg${ listDto.index}' onkeydown="checkIsUrl(this)" onblur="checkIsUrl(this)" name='msgDto.bodyDto[${ listDto.index}].content' value='<s:property value="Content" />'>
		  									<input type='button' onclick='delMsgFun(this,0)' id='delContent${ listDto.index}' value='删除'>
										</s:elseif>
									</li>
								</s:iterator>
							</ul>
						</li>
						<ul><li><br> 
							<!-- &lt;input type=&quot;button&quot; value=&quot;预览效果&quot; onclick=&quot;view()&quot;/&gt;  --> 
						</li></ul>

						<li>
							开始时间：
							<s:textfield id="update_activeStartTime"
								readonly="true" name="msgDto.startDate" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',maxDate:'#F{$dp.$D(update_activeEndTime)}'})" ></s:textfield>
						</li>
						<li>
							结束时间：
							<s:textfield id="update_activeEndTime"
								name="msgDto.expireDate" readonly="true" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(update_activeStartTime)}'})"></s:textfield>
						</li>
					</ul>
					<div style="margin:10 70;">
						<s:submit value="确定" id="confirmBtn" method="saveMessageInfo"
						name="saveMessageInfo" align="left"></s:submit>
					<s:submit value="保存&下一步" id="saveAndNextBtn" method="goAddGroup" name="goAddGroup"
						align="left"></s:submit>
					</div>
				</form>

				<!-- 增加组选择的弹出层 -->
				<div id="addPnsGroup" style="display: none;" >
					<div>
						<ul>
							<li>
								用户ID：
								<input type="text" name="" />
								设备类型：
								<select id="deviceType">
									<option value="">
										请选择
									</option>
									<option value="0">
										androis
									</option>
									<option value="1">
										ios
									</option>
								</select>
							</li>
							<li>
								设备ID：
								<input type="text" name="" id="deviceId" width="300px" />
							</li>
							<li>
								<input type="button" value="检索" onclick="openDialog(1)" />
								<input type="button" value="重置" />
							</li>
						</ul>
					</div>

					<div>
						<form action="<%=path%>/pns/saveGroup.action" method="post"
							id="addPnsGroupForm" enctype=multipart/form-data>
							组名：
							<input type="text" name="groupName" id="groupName" />
							描述：
							<input type="text" name="descpit" id="describes" />
							<table class="fullwidth" cellpadding="0" cellspacing="0"
								border="1" id="userTab">
								<thead>
									<tr>
										<td width="50px"></td>
										<td width="80px">
											用户ID
										</td>
										<td>
											设备ID
										</td>
										<td>
											用户类型
										</td>
										<td width="100px">
											创建时间
										</td>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
							<div>	<input type="button" value="全选" id="all" />
								<input type="button" value="全不选" id="delAll" />
								<input type="button" value="反选" id="antiAll" />
								</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
